<template>
  <!-- 上架作业 -->
  <div id="ShelfOperation">
    <root name="ShelfOperation">
      <SafeHeader
        v-bind="{
          title: '上架作业',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div>
        <v-container>
          <v-card outlined class="py-3">
            <v-row class="ma-0">
              <v-col
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                目标库位
              </v-col>
              <v-col cols="12" class="py-1">
                <v-text-field
                  class="my-0 inputPlaceholder"
                  dense
                  hide-details
                  placeholder="请扫描或者输入目标库位"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0">
              <v-col
                cols="12"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
                >容器</v-col
              >
              <v-col cols="12" class="py-1">
                <v-text-field
                  class="inputPlaceholder"
                  dense
                  hide-details
                  placeholder="请扫描或者输入容器编码"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-card>
        </v-container>
        <v-container class="px-0" style="margin-bottom: 48px">
          <v-data-table
            no-data-text="暂无数据"
            hide-default-footer
            :headers="headers"
            :items="tableData"
            disable-sort
            class="shelfOperation_table"
            :loading="loading"
            loading-text="Loading... Please wait"
            ><template v-slot:top>
              <v-row class="ma-0">
                <v-col
                  cols="12"
                  style="font-size: 15px"
                  class="py-1 d-flex align-center font-weight-bold"
                  >待上架容器列表</v-col
                >
              </v-row>
              <v-divider class="ma-1"></v-divider>
            </template>
          </v-data-table>
        </v-container>
        <v-bottom-navigation fixed>
          <v-row class="ma-0 pa-2" style="border-top: 1px solid grey">
            <v-col
              cols="4"
              class="pa-0 d-flex align-center"
              style="font-size: 15px"
            >
              合计：<span style="color: #f8a73c">{{ tableData.length }} </span>
              <span> 箱</span>
            </v-col>
            <v-col class="pa-0">
              <v-btn block color="#193690" dark style="height: 100%;boarder"
                ><span
                  style="color: #fff; font-size: 15px"
                  class="font-weight-bold"
                  @click="acc"
                  >提交</span
                ></v-btn
              >
            </v-col>
          </v-row>
        </v-bottom-navigation>
      </div>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
// import wms from "../../utils/http.js";
// import { apiList } from "@/static/apiList";
export default {
  name: "ShelfOperation",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      loading: false,
      headers: [
        {
          text: "容器编码",
          align: "start",
          value: "generateCode",
        },
        { text: "物料编码", value: "itemCode" },
        { text: "物料名称", value: "itemName" },
        { text: "数量", value: "itemNum" },
        { text: "批次", value: "batch" },
      ],
      tableData: [
        {
          generateCode: "A111111",
          itemCode: "bac1234456",
          itemName: "两只老虎",
          itemNum: "9527",
          batch: "12",
        },
        {
          generateCode: "B111111",
          itemCode: "bac1234456",
          itemName: "两只老虎",
          itemNum: "9527",
          batch: "12",
        },
        {
          generateCode: "C111111",
          itemCode: "bac1234456",
          itemName: "两只老虎",
          itemNum: "9527",
          batch: "12",
        },
        {
          generateCode: "D111111",
          itemCode: "bac1234456",
          itemName: "两只老虎",
          itemNum: "9527",
          batch: "12",
        },
      ],
    };
  },
  methods: {
    acc() {
      console.log(this);
      this.$confirm("我不想这样做", { type: "success" }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

.shelfOperation_table
  ::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
  ::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
    ::v-deep .v-data-table__empty-wrapper
      display: flex
      justify-content: center
      align-items: center
      td
        line-height: 48px

.inputPlaceholder
  ::v-deep.v-text-field__slot
    input::-webkit-input-placeholder
      font-size: 15px
    input::-moz-placeholder
      font-size: 15px
    input:-moz-placeholder
      font-size: 15px
    input:-ms-input-placeholder
      font-size: 15px
</style>